import React, { Component } from 'react'
import BrNav from "../brNav/BrNav"
import SearchInput from "../searchInput/SearchInput"
import { Tabs, WhiteSpace,Toast } from 'antd-mobile';
import { getGoodList } from "../../data/api"
import "./goodList.scss"
import emptyProduct from "../../static/img/empty_product.48ff491d.jpg"

const tabs = [
    { title: '综合', sub: '1' },
    { title: '销量', sub: '2' },
    { title: '价格', sub: '3' },
];
export default class GoodList extends Component {
    constructor(props) {
        super(props);
        this.goodListRef = React.createRef();
    }
    //页码
    pagenum = 1;
    //页容量
    pagesize = 20;
    //分类id
    cid = "";
    //关键字
    query = "";
    //总数
    total = 0;
    //标识(防止手抖到底了又回退上去，发送两次请求)
    loading = false;
    state = {
        activeTab: "overall",//综合  sale 销售  price 价格
        goodList: [],//商品列表
    }
    async componentDidMount() {
        // console.log(this.props);
        let arr = this.props.location.search.split("?")[1].split("=");
        // console.log(arr);
        //处理首页跳转过来的query
        if (arr[0] === 'query') {
            this.query = arr[1]
        }
        //处理分类页跳转过来的cid
        if (arr[0] === 'cid') {
            this.cid = arr[1];
        }
        this.getProductList();
        // console.log(this.goodListRef.current.parentElement);
        //监听滚动事件
        this.goodListRef.current.parentElement.addEventListener("scroll", this.handleScroll)
    }
    //跳转到其它页面时，销毁掉滚动事件
    componentWillUnmount() {
        this.goodListRef.current.parentElement.removeEventListener("scroll", this.handleScroll)
    }
    handleScroll = () => {
        //获取的是整个页面
        // console.log(document.documentElement);
        let scrollEl = this.goodListRef.current.parentElement;
        //可以滚动的距离
        let scrollHeight = scrollEl.scrollHeight;
        // console.log(scrollHeight);
        //向上滚走的距离
        let scrollTop = scrollEl.scrollTop;
        // console.log("向上滚走的距离",scrollTop);
        //盒子的视口高度
        let clientHeight = scrollEl.clientHeight;
        // console.log("盒子的视口高度:",clientHeight);
        // console.log(scrollHeight-scrollTop-clientHeight<1?"触底了":"");
        if (scrollHeight - scrollTop - clientHeight < 1) {
            //触底时，发送请求，加载后面的数据
            this.getProductList();
        }
    }
    //获取到商品列表的数据
    getProductList = async (params) => {
        //判断要发送几次请求，第一次请求时，total=0，第一个条件永远为false，所以要设置第二个条件
        //页码小于等于总页码
        if ((this.pagenum <= Math.ceil(this.total / this.pagesize) || this.total === 0) && this.loading === false) {
            this.loading = true;//正在加载数据
            //处理一下params
            params = params || [];
            if (this.cid) {
                params.cid = this.cid
            }
            if (this.query) {
                params.query = decodeURIComponent(this.query);//百分比编码处理
            }
            // console.log(params);
            //发送请求拿数据
            let res = await getGoodList({
                ...params,
                pagenum: this.pagenum++,
                pagesize: this.pagesize
            });
            // console.log(res);
            this.total = res.message.total || 0;
            this.setState({
                goodList: [...this.state.goodList, ...res.message.goods]
            });
        }else{
            Toast.info('已经到低了',1);
        }
        this.loading = false;
    }
    //tabs点击切换
    handleChange = (e) => {
        // console.log(e.target.dataset);
        let { active } = e.target.dataset;
        this.setState({
            activeTab: active
        })
    }

    //点击单个商品跳转到详情页
    goToDetail = (goods_id) => {
        this.props.history.push("goodDetail/" + goods_id);
    }
    render() {
        return (
            <div>
                <BrNav title="商品列表" left={true}></BrNav>
                <SearchInput></SearchInput>
                <div>
                    {/* 通过ant 组件实现 tabs */}
                    {/* <Tabs tabs={tabs}
                        initialPage={0}
                        onChange={(tab, index) => { console.log('onChange', index, tab); }}
                        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                    >
                        <div className="goodsSynthesize">
                            {
                                this.state.goodList.map((v, i) => {
                                    return <div className="goodListItem" key={i} onClick={this.goToDetail.bind(this,v.goods_id)}>
                                        <div className="imgWrapper">
                                            <img src={v.goods_small_logo?v.goods_small_logo:emptyProduct} alt="" />
                                        </div>
                                        <div className="goodsLeft">
                                            <div className="goodsDescribe">{v.goods_name}</div>
                                            <p className="price">￥{v.goods_price}</p>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>

                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>

                        </div>
                    </Tabs>
                    <WhiteSpace /> */}
                </div>
                {/* 商品列表的tabs标签开始 */}
                <div className="goodsListTabs" onClick={this.handleChange}>
                    <div className={this.state.activeTab === 'overall' ? "active goodListTab" : "goodListTab"} data-active="overall">综合</div>
                    <div className={this.state.activeTab === 'sale' ? "active goodListTab" : "goodListTab"} data-active="sale">销售</div>
                    <div className={this.state.activeTab === 'price' ? "active goodListTab" : "goodListTab"} data-active="price">价格</div>
                </div>
                {/* 商品列表的tabs标签结束 */}
                {/* 商品列表数据显示开始 */}
                <div className="goodsListContent" >
                    {/* 判断如果activeTab 等于综合这一项就显示出来，不等于就隐藏 */}
                    {
                        this.state.activeTab === "overall" ? <div className="synthesize" ref={this.goodListRef}>
                            {
                                this.state.goodList.map((v, i) => {
                                    return <div className="goodListItem" key={i} onClick={this.goToDetail.bind(this, v.goods_id)}>
                                        <div className="imgWrapper">
                                            <img src={v.goods_small_logo ? v.goods_small_logo : emptyProduct} alt="" />
                                        </div>
                                        <div className="goodsLeft">
                                            <div className="goodsDescribe">{v.goods_name}</div>
                                            <p className="price">￥{v.goods_price}</p>
                                        </div>
                                    </div>
                                })
                            }
                        </div> : ""
                    }
                    {
                        this.state.activeTab === "sale" ? <h1>销售</h1> : ""
                    }
                    {
                        this.state.activeTab === "price" ? <h1>价格</h1> : ''
                    }
                </div>
                {/* 商品列表数据显示结束 */}
            </div>
        )
    }
}
